<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!--user registration page-->
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Language" content="zh-CN">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Url shorten app</title>

    <!--    import jquery and bootstrap by cdn-->
    <script th:src="@{https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js}"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
        @media (min-width: 1200px) {
            .container {
                width: 751px;
            }
        }

        .regForm {
            height: 400px;
            width: 500px;
            border: #4d4d4d solid 1px;
            border-radius: 4px;
            box-shadow: 5px 5px 5px #4d4d4d;
            margin-top: 100px;
            margin-left: auto;
            margin-right: auto;
            padding: 20px 40px;
        }


        .regForm h2 {
            text-align: center;
        }

        .button {
            text-align: center;
            vertical-align: middle;
        }

    </style>
</head>
<body>
<div class="container">

    <div th:if="${regRes}" class="alert alert-danger msg" role="alert">
        <span th:text="${regRes.msg}"></span>
    </div>

    <div class="regForm">
<<<<<<< HEAD
        <h2>注册账户</h2>
        <form action="/reg" method="post">
            <div class="form-group">
                <label for="iptuname">用户名</label>
                <input type="text" class="form-control" id="iptuname" name="username" placeholder="请输入用户名" required>
            </div>
            <div class="form-group">
                <label for="iptPwd">密码</label>
                <input type="password" class="form-control" id="iptPwd" name="password" placeholder="请输入密码" required>
            </div>

            <div class="form-group">
                <label for="iptPwdAg">确认密码</label>
                <input type="password" class="form-control" id="iptPwdAg" name="confirm_password" placeholder="请再次输入密码" required>
=======
        <h2>Account registration</h2>
        <form action="/reg" method="post">
            <div class="form-group">
                <label for="iptuname">Username</label>
                <input type="text" class="form-control" id="iptuname" name="username" placeholder="Please input username" required>
            </div>
            <div class="form-group">
                <label for="iptPwd">Password</label>
                <input type="password" class="form-control" id="iptPwd" name="password" placeholder="Please input password" required>
            </div>

            <div class="form-group">
                <label for="iptPwdAg">Confirm password</label>
                <input type="password" class="form-control" id="iptPwdAg" name="confirm_password" placeholder="Please input password again" required>
            </div>

            <div class="button">
                <input type="submit" class="btn btn-primary" value="submit"/>
            </div>

            <div class="small"><a href="/login">返回登录页面</a></div>

        </form>
    </div>

</div>

<script>

    function validatePassword() {
        if ($("#iptPwd").val() != $("#iptPwdAg").val()) {
            $("#iptPwdAg")[0].setCustomValidity("两次密码输入不匹配");
        } else {
            $("#iptPwdAg")[0].setCustomValidity('');
        }
    }

    $("#iptPwd")[0].onchange = validatePassword; //当密码改变时
    $("#iptPwdAg")[0].onkeyup = validatePassword; //当确认密码键盘弹起

<<<<<<< HEAD

=======
>>>>>>> 0ce6d0509f454dda5cb42aafa27b90e2b74ac758
</script>

</body>
</html>